<template>
<el-container>
  <el-main>
      <el-row :gutter="10">
          <el-col :span="2" style="border:1px solid rgba(255, 255, 255, 0.2)">

          </el-col>
          <el-col :span="20">
              <el-row :gutter="10">
                  <el-col :span="24">
                    <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                        <div slot="header" class="clearfix">
                            <span>标签</span>
                            <el-button style="float: right; padding: 3px 0" type="text">共4个</el-button>
                        </div>
                        <div class="text item">
                            <el-input placeholder="请输入内容"  class="input-with-select">
                                <el-button slot="prepend" icon="el-icon-search"></el-button>
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </el-card>
                  </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top:10px">
                  <el-col :span="24">
                    <el-card class="box-card">

                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="16">
                                        <el-row :gutter="10">
                                            <el-col :span="24">
                                                <span style="font-weight:800">Vue入门</span>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" class="content-margin">
                                            <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                                Vue 是一套用于构建用户界面的渐进式框架。
                                                与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                                Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                                另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                        </el-card>
                                        
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                    <el-col :span="12">
                                        <el-row :gutter="12" style="display: flex; align-items: center;">
                                            <el-col :span="4" class="col-d">
                                                <el-avatar size="small"> 
                                                    <i class="el-icon-user-solid"></i>
                                                </el-avatar>
                                                <el-button type="text">wn</el-button>
                                            </el-col>
                                            <el-col :span="8"  class="col-d">
                                                <i class="el-icon-date"></i>
                                                <span class="demonstration"> 2021/5/12 12:00:00</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">浏览(278)</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">评论(3)</span>
                                            </el-col> 
                                        </el-row>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-row :gutter="12">
                                            <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                                <span class="demonstration">阅读全文>></span>
                                            </el-col>                                        
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    
                        <el-divider></el-divider>

                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="16">
                                        <el-row :gutter="10">
                                            <el-col :span="24">
                                                <span style="font-weight:800">Vue入门</span>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" class="content-margin">
                                            <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                                Vue 是一套用于构建用户界面的渐进式框架。
                                                与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                                Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                                另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                        </el-card>
                                        
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                    <el-col :span="12">
                                        <el-row :gutter="12" style="display: flex; align-items: center;">
                                            <el-col :span="4" class="col-d">
                                                <el-avatar size="small"> 
                                                    <i class="el-icon-user-solid"></i>
                                                </el-avatar>
                                                <el-button type="text">wn</el-button>
                                            </el-col>
                                            <el-col :span="8"  class="col-d">
                                                <i class="el-icon-date"></i>
                                                <span class="demonstration"> 2021/5/12 12:00:00</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">浏览(278)</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">评论(3)</span>
                                            </el-col> 
                                        </el-row>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-row :gutter="12">
                                            <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                                <span class="demonstration">阅读全文>></span>
                                            </el-col>                                        
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>


                         <el-divider></el-divider>

                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="16">
                                        <el-row :gutter="10">
                                            <el-col :span="24">
                                                <span style="font-weight:800">Vue入门</span>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" class="content-margin">
                                            <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                                Vue 是一套用于构建用户界面的渐进式框架。
                                                与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                                Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                                另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                        </el-card>
                                        
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                    <el-col :span="12">
                                        <el-row :gutter="12" style="display: flex; align-items: center;">
                                            <el-col :span="4" class="col-d">
                                                <el-avatar size="small"> 
                                                    <i class="el-icon-user-solid"></i>
                                                </el-avatar>
                                                <el-button type="text">wn</el-button>
                                            </el-col>
                                            <el-col :span="8"  class="col-d">
                                                <i class="el-icon-date"></i>
                                                <span class="demonstration"> 2021/5/12 12:00:00</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">浏览(278)</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">评论(3)</span>
                                            </el-col> 
                                        </el-row>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-row :gutter="12">
                                            <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                                <span class="demonstration">阅读全文>></span>
                                            </el-col>                                        
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>


                         <el-divider></el-divider>

                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="16">
                                        <el-row :gutter="10">
                                            <el-col :span="24">
                                                <span style="font-weight:800">Vue入门</span>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" class="content-margin">
                                            <el-col :span="24" style="color: #606266;font-size: 15px;font-family: Helvetica Neue;">
                                                Vue 是一套用于构建用户界面的渐进式框架。
                                                与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
                                                Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
                                                另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card  shadow="hover" :body-style="{ padding: '0px',height: '140px'}">
                                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                        </el-card>
                                        
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10" class="content-margin" style="display: flex;  align-items: center;font-size: 12px; color: #909399">
                                    <el-col :span="12">
                                        <el-row :gutter="12" style="display: flex; align-items: center;">
                                            <el-col :span="4" class="col-d">
                                                <el-avatar size="small"> 
                                                    <i class="el-icon-user-solid"></i>
                                                </el-avatar>
                                                <el-button type="text">wn</el-button>
                                            </el-col>
                                            <el-col :span="8"  class="col-d">
                                                <i class="el-icon-date"></i>
                                                <span class="demonstration"> 2021/5/12 12:00:00</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">浏览(278)</span>
                                            </el-col>
                                            <el-col :span="6"  class="col-d">
                                                <span class="demonstration">评论(3)</span>
                                            </el-col> 
                                        </el-row>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-row :gutter="12">
                                            <el-col :span="24" style="    display: flex;justify-content: flex-end;">
                                                <span class="demonstration">阅读全文>></span>
                                            </el-col>                                        
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>

                        <el-divider></el-divider>

                        <el-row :gutter="12">
                            <el-col :span="24">
                                <el-row :gutter="10">
                                    <el-col :span="4">
                                        <el-button>上一页</el-button>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="currentPage3"
                                        :page-size="100"
                                        layout="prev, pager, next, jumper"
                                        :total="1000">
                                        </el-pagination>
                                        
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button>下一页</el-button>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>   
 
 

 
                    
                    </el-card>
                  </el-col>
              </el-row>
            

          </el-col>
          <el-col :span="2" style="border:1px solid rgba(255, 255, 255, 0.2)">

          </el-col>
      </el-row>
  </el-main>
</el-container>
</template>
<script>
export default{
    name:'Tag',
    data(){
        return{
            currentPage3:5

        }
    },
    methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>
<style>
.el-container{
    /* height:100%; */
}
.el-main {
    background-color:rgba(255, 255, 255, 0.2);
    color: #333;
}
.el-card{
 background-color:rgba(255, 255, 255, 0.5);
}
.content-margin{
    margin-top:10px;
}
.col-d{
    display: flex;
    align-items: center;
    justify-content: end;
}
.image {
    width: 100%;
    display: block;
}
</style>